<template>
  <div class="dashboard-container">
    <!-- data -->
    <div class="flex justify-between">
      <div class="dashboard-data" v-for="(item, index) in datas" :key="index">
        <div
          :class="[
            'text-right',
            'text-bold',
            item.pm ? 'color-green' : 'color-red',
          ]"
        >
          {{ item.motion }} <span v-text="item.pm ? '↑' : '↓'"></span>
        </div>
        <div class="text-center text-xxl text-bold margin-tb-sm">
          {{ item.num }}
        </div>
        <div class="text-center">{{ item.name }}</div>
      </div>
    </div>
    <!-- 图 -->
    <div class="margin-top flex justify-between">
      <div style="width: 49%">
        <div id="brokenLine"></div>
        <div id="dealWith" class="margin-top">
          <el-tabs v-model="activeName">
            <el-tab-pane label="待回复评论" name="first">1</el-tab-pane>
            <el-tab-pane label="友链申请" name="second">2</el-tab-pane>
            <el-tab-pane label="最新文章" name="third">3</el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <!-- 地图 -->
      <div id="chinaMap"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "@/libs/china";

export default {
  data() {
    return {
      activeName: "first",
      datas: [
        {
          motion: 1,
          pm: 1,
          num: 18,
          name: "文章",
        },
        {
          motion: 2,
          pm: 1,
          num: 90,
          name: "用户",
        },
        {
          motion: 2,
          pm: 0,
          num: 1000,
          name: "评论",
        },
        {
          motion: 2,
          pm: 0,
          num: 12,
          name: "链接",
        },
        {
          motion: 12,
          pm: 1,
          num: 13,
          name: "作品",
        },
        {
          motion: 12,
          pm: 1,
          num: 90,
          name: "归档",
        },
      ],
    };
  },
  mounted() {
    this.handleInit();
    this.$nextTick(() => {
      this.handleInitMap();
    });
  },
  methods: {
    //修改echart配制
    handleInitMap() {
      let mapDiv = document.getElementById("chinaMap");
      let myChart = echarts.init(mapDiv);

      let options = {
        title: {
          text: "用户全国分布情况",
        },
        tooltip: {
          triggerOn: "mousemove", //mousemove、click
          padding: 8,
          borderWidth: 1,
          borderColor: "#409eff",
          backgroundColor: "rgba(255,255,255,0.7)",
          textStyle: {
            color: "#000000",
            fontSize: 13,
          },
          formatter: function (e, t, n) {
            let data = e.data;
            //模拟数据
            data.specialImportant = (Math.random() * 1000) | 0;
            data.import = (Math.random() * 1000) | 0;
            data.compare = (Math.random() * 1000) | 0;
            data.common = (Math.random() * 1000) | 0;
            data.specail = (Math.random() * 1000) | 0;

            let context = `
               <div>
                   <p><b style="font-size:15px;">${data.name}</b>(2020年第一季度)</p>
                   <p class="tooltip_style"><span class="tooltip_left">事件总数</span><span class="tooltip_right">${data.value}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">特别重大事件</span><span class="tooltip_right">${data.specialImportant}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">重大事件</span><span class="tooltip_right">${data.import}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">较大事件</span><span class="tooltip_right">${data.compare}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">一般事件</span><span class="tooltip_right">${data.common}</span></p>
                   <p class="tooltip_style"><span class="tooltip_left">特写事件</span><span class="tooltip_right">${data.specail}</span></p>
               </div>
            `;
            return context;
          },
        },
        visualMap: {
          show: true,
          left: 26,
          bottom: 40,
          showLabel: true,
          pieces: [
            {
              gte: 100,
              label: ">= 1000",
              color: "#1f307b",
            },
            {
              gte: 500,
              lt: 999,
              label: "500 - 999",
              color: "#3c57ce",
            },
            {
              gte: 100,
              lt: 499,
              label: "100 - 499",
              color: "#6f83db",
            },
            {
              gte: 10,
              lt: 99,
              label: "10 - 99",
              color: "#9face7",
            },
            {
              lt: 10,
              label: "<10",
              color: "#bcc5ee",
            },
          ],
        },
        geo: {
          map: "china",
          scaleLimit: {
            min: 1,
            max: 2,
          },
          zoom: 1.2,
          label: {
            normal: {
              show: true,
              fontSize: "14",
              color: "rgba(0,0,0,0.7)",
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: {
              areaColor: "#f2d5ad",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0,
            },
          },
        },
        series: [
          {
            name: "突发事件",
            type: "map",
            geoIndex: 0,
            data: [
              {
                name: "南海诸岛",
                value: 100,
                eventTotal: 100,
                specialImportant: 10,
                import: 10,
                compare: 10,
                common: 40,
                specail: 20,
              },
              {
                name: "北京",
                value: 540,
              },
              {
                name: "天津",
                value: 130,
              },
              {
                name: "上海",
                value: 400,
              },
              {
                name: "重庆",
                value: 750,
              },
              {
                name: "河北",
                value: 130,
              },
              {
                name: "河南",
                value: 830,
              },
              {
                name: "云南",
                value: 110,
              },
              {
                name: "辽宁",
                value: 19,
              },
              {
                name: "黑龙江",
                value: 150,
              },
              {
                name: "湖南",
                value: 690,
              },
              {
                name: "安徽",
                value: 60,
              },
              {
                name: "山东",
                value: 39,
              },
              {
                name: "新疆",
                value: 4,
              },
              {
                name: "江苏",
                value: 31,
              },
              {
                name: "浙江",
                value: 104,
              },
              {
                name: "江西",
                value: 36,
              },
              {
                name: "湖北",
                value: 52,
              },
              {
                name: "广西",
                value: 33,
              },
              {
                name: "甘肃",
                value: 7,
              },
              {
                name: "山西",
                value: 5,
              },
              {
                name: "内蒙古",
                value: 778,
              },
              {
                name: "陕西",
                value: 22,
              },
              {
                name: "吉林",
                value: 4,
              },
              {
                name: "福建",
                value: 18,
              },
              {
                name: "贵州",
                value: 5,
              },
              {
                name: "广东",
                value: 98,
              },
              {
                name: "青海",
                value: 1,
              },
              {
                name: "西藏",
                value: 0,
              },
              {
                name: "四川",
                value: 44,
              },
              {
                name: "宁夏",
                value: 4,
              },
              {
                name: "海南",
                value: 22,
              },
              {
                name: "台湾",
                value: 3,
              },
              {
                name: "香港",
                value: 5,
              },
              {
                name: "澳门",
                value: 555,
              },
            ],
          },
        ],
      };
      myChart.setOption(options);
    },
    handleInit() {
      var chartDom = document.getElementById("brokenLine");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "基本数据概览",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["网站访问", "博客发布", "评论发布", "用户增长"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "2021/3/2",
            "2021/3/3",
            "2021/3/4",
            "2021/3/5",
            "2021/3/6",
            "2021/3/7",
            "2021/3/8",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "网站访问",
            type: "line",
            stack: "总量",
            data: [12, 13, 11, 13, 9, 23, 21],
          },
          {
            name: "博客发布",
            type: "line",
            stack: "总量",
            data: [22, 12, 19, 23, 29, 33, 31],
          },
          {
            name: "评论发布",
            type: "line",
            stack: "总量",
            data: [15, 23, 20, 15, 19, 33, 41],
          },
          {
            name: "用户增长",
            type: "line",
            stack: "总量",
            data: [32, 33, 30, 33, 39, 33, 32],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 0;
    padding: 50px;
    height: 100%;
    background-color: rgb(243, 244, 246);
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.dashboard-data {
  background-color: #fff;
  box-shadow: 10px 13px 13px #eee;
  padding: 30px;
  width: 15%;
  height: 160px;
}
#brokenLine {
  padding: 20px 15px;
  background-color: #fff;
  width: 100%;
  height: 400px;
}
#chinaMap {
  padding: 20px 15px;
  background-color: #fff;
  width: 49%;
  height: 650px;
}
#dealWith {
  padding: 20px 15px;
  background-color: #fff;
  width: 100%;
  height: 220px;
}
</style>
